{% extends "../layout/main.html" %}
{% block css %}<!-- DataTables CSS -->
<link href="{{ static_url("SBadmin/vendor/datatables-plugins/dataTables.bootstrap.css") }}" rel="stylesheet">
<!-- DataTables Responsive CSS -->
<link href="{{ static_url("SBadmin/vendor/datatables-responsive/dataTables.responsive.css") }}" rel="stylesheet">{% end %}
{% block title %}福娃后台{% end %}
{% block contents %}<div class="row">
    <div class="col-lg-12">
        <h3 class="page-header">福娃列表</h3>
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
                    <thead>
                    <tr>
                        <th>号码</th>
                        <th>申请人</th>
                        <th>性质</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                </table>
                <!-- /.table-responsive -->
            </div>
            <!-- /.panel-body -->
        </div>
        <!-- /.panel -->
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->{% end %}
{% block js %}<!-- DataTables JavaScript -->
<script src="{{ static_url("SBadmin/vendor/datatables/js/jquery.dataTables.min.js") }}"></script>
<script src="{{ static_url("SBadmin/vendor/datatables-plugins/dataTables.bootstrap.min.js") }}"></script>
<script src="{{ static_url("SBadmin/vendor/datatables-responsive/dataTables.responsive.js") }}"></script>
<script>
    $(document).ready(function() {
        $('#dataTables-example').DataTable({
            "ajax": '{{  listurl }}',
            "columns": [
                {"data": "id"},
                {"data": "name" },
                {"data": "nature"},
                {"data": "awarded" },
                {"data": "key_id"}
            ],
            "serverSide": true,
            "processing": true,
            "bFilter": false, ///是否启用客户端过滤功能
            //"bPaginate": false, ///显示使用分液器
            "bLengthChange": true,  ///是否可以修改页面显示行数
            "aLengthMenu": [10, 20, 30, 50, 100], ///设置可选的显示行数
            "iDisplayLength": 30,  ///默认显示20行
            //"sAjaxSource": "/fuwa/list",
            "oLanguage": {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                }
            },
            "bSort": false, ///是否可排序
            "createdRow": function(row, data, index){
                var L1, L2, L3;
                L1 = '未兑奖';
                L2 = '寻宝福娃';
                if(parseInt(data["awarded"]) == 1) {
                    L1 = '已兑奖';
                }
                $('td', row).eq(3).html(L1);
                if(data['nature'] == 'i'){
                    L2 = '缘份福娃';
                }
                $('td', row).eq(2).html(L2);
                L3 = '<a class="btn btn-default" href="/fuwa/info/' + data['key_id'] + '" role="button" target="_blank">详情</a>';
                $('td', row).eq(4).html(L3);
            }
        });
    });
</script>{% end %}